diff --git a/swh/web/ui/templates/api.html b/swh/web/ui/templates/api.html
index 08b5b76b3..da0c6c1b9 100644
--- a/swh/web/ui/templates/api.html
+++ b/swh/web/ui/templates/api.html
@@ -1,13 +1,13 @@
{% extends "layout.html" %}
-{% block title %}Software Heritage API Overview{% endblock %}
+{% block title %}API Overview{% endblock %}
{% block content %}
<div class="api-doc">
{% for route, doc in doc_routes %}
<div class="api-doc-route">
<h2> <a href="{{ route }}">{{ route }}</a> </h2>
{% autoescape off %}{{ doc | safe_docstring_display }}{% endautoescape %}
</div>
</br>
{% endfor %}
</div>
{% endblock %}
diff --git a/swh/web/ui/templates/home.html b/swh/web/ui/templates/home.html
index daf5fbe14..564deee83 100644
--- a/swh/web/ui/templates/home.html
+++ b/swh/web/ui/templates/home.html
@@ -1,9 +1,12 @@
{% extends "layout.html" %}
{% block title %}Home{% endblock %}
{% block content %}
+
<ul>
<li><a href="/about">About</a></li>
- <li><a href="/search">Search</a></li>
- <li><a href="/browse/directory">Browse directory</a></li>
+ <li><a href="https://www.softwareheritage.org">Main site</a></li>
+ <li><a href="/browse/">Browse</a></li>
+ <li><a href="/api/">API</a></li>
</ul>
+
{% endblock %}
diff --git a/swh/web/ui/templates/layout.html b/swh/web/ui/templates/layout.html
index 6e2f85022..5abcdecdf 100644
--- a/swh/web/ui/templates/layout.html
+++ b/swh/web/ui/templates/layout.html
@@ -1,37 +1,57 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>{% block title %}{% endblock %} - The Software Heritage Archive</title>
- <!-- BEGIN: bootstrap -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
- <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css') }}">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
- <!-- END: bootstrap -->
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
- <script>document.domain = "softwareheritage.org";</script>
-</head>
-<body>
- <div class="jumbotron">
- <div class="container">
- <h1>{{ self.title() }}</h1>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>{% block title %}{% endblock %} - The Software Heritage Archive</title>
+ <!-- BEGIN: bootstrap -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css') }}">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
+ <!-- END: bootstrap -->
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
+ <script>document.domain = "softwareheritage.org";</script>
+ </head>
+ <body>
+ <div class="jumbotron">
+ <div class="container">
+ <h1>{{ self.title() }}</h1>
+ <nav class="navbar navbar-default">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed"
+ data-toggle="collapse" data-target="#swh-navbar-collapse" aria-expanded="false">
+ </button>
+ <a class="navbar-brand" href="/">SWH Archive</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul class="nav navbar-nav">
+ <li><a href="https://www.softwareheritage.org">Main site</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/browse/">Browse</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/api/">API</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/about/">About</a></li>
+ </ul>
+ </div>
+ </nav>
+ </div>
</div>
- </div>
- {% with messages = get_flashed_messages(with_categories=true) %}
+ {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
- <div class="container messages">
- {% for category, message in messages %}
- <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
- {% endfor %}
- </div>
+ <div class="container messages">
+ {% for category, message in messages %}
+ <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
+ {% endfor %}
+ </div>
{% endif %}
- {% endwith %}
- <div class="container content">
- {% block content %}{% endblock %}
- </div>
-</body>
+ {% endwith %}
+ <div class="container content">
+ {% block content %}{% endblock %}
+ </div>
+ </body>
</html>
diff --git a/swh/web/ui/templates/origin.html b/swh/web/ui/templates/origin.html
index 8d7d80066..77c6cfc9f 100644
--- a/swh/web/ui/templates/origin.html
+++ b/swh/web/ui/templates/origin.html
@@ -1,40 +1,48 @@
{% extends "layout.html" %}
{% block title %}Origin{% endblock %}
{% block content %}
{% if message is not none %}
- {{ message }}
+{{ message }}
{% endif %}
{% if origin is not none %}
-<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='js/calendar.js') }}"></script>
-<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='lib/jquery.flot.min.js') }}"></script>
-<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='lib/jquery.flot.time.min.js') }}"></script>
-<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='lib/jquery.flot.selection.min.js') }}"></script>
-<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='lib/jquery.flot.tooltip.min.js') }}"></script>
-<div> Details on origin {{ origin['id'] }}:
- <div id="swh-calendar" style="height: 200px">
- <div id="cal-zoom-window" style="height: 60%">
- </div>
- <div id="cal-static-window" style="height: 40%">
- </div>
+
+<!-- Flot plugin dependencies -->
+{% for fname in ['js/calendar.js', 'lib/jquery.flot.min.js', 'lib/jquery.flot.time.min.js', 'lib/jquery.flot.selection.min.js', 'lib/jquery.flot.tooltip.min.js'] %}
+<script language="javascript" type="text/javascript" src="{{ url_for('static', filename=fname) }}"></script>
+{% endfor %}
+
+<!-- Timeline result -->
+<h2>Origin visit history</h2>
+<div class="timeline">
+ <div id="swh-calendar-window" style="height: 200px">
+ <div id="cal-zoom-window" style="height: 60%"></div>
+ <div id="cal-static-window" style="height: 40%"></div>
</div>
<button id="cal-clear">Reset</button>
- {% for key in ['type', 'lister', 'project', 'url'] %}
- {% if origin[key] is not none %}
- <div class="row">
- <div class="col-md-2">{{ key }}</div>
- <div class="col-md-6">{{ origin[key] }}</div>
- </div>
- {% endif %}
- {% endfor %}
- {% if 'decoding_failures' in content %}
- <div class="row">
- <div class="col-md-10">(some decoding errors)</div>
- </div>
- {% endif %}
</div>
- <script>$(function(){var cal = new Calendar('{{ browse_url }}', '{{ visit_url }}', {{ origin['id'] }}, $('#cal-zoom-window'), $('#cal-static-window'), $('#cal-clear'));});</script>
+
+<!-- Data result -->
+<h2>Origin information</h2>
+<div> Details on origin {{ origin['id'] }}:
+ {% for key in ['type', 'lister', 'project', 'url'] %}
+ {% if origin[key] is not none %}
+ <div class="row">
+ <div class="col-md-2">{{ key }}</div>
+ <div class="col-md-6">{{ origin[key] }}</div>
+ </div>
+ {% endif %}
+ {% endfor %}
+ {% if 'decoding_failures' in content %}
+ <div class="row">
+ <div class="col-md-10">(some decoding errors)</div>
+ </div>
+ {% endif %}
+</div>
+
+<!-- Flot calendar setup -->
+<script>$(function(){var cal = new Calendar('{{ browse_url }}', '{{ visit_url }}', {{ origin['id'] }}, $('#cal-zoom-window'), $('#cal-static-window'), $('#cal-clear'));});</script>
{% endif %}
{% endblock %}